<script setup lang="ts">
import { loading } from "@/router/guard";
const getImageUrl = (name: string, type = 'jpg') => {
  return new URL(`./assets/${name + '.' + type}`, import.meta.url).href
}
const List = [
  {
    value: 'https://www.008008.jp/moving/single/?utm_source=ytc&utm_medium=referral&utm_campaign=ytc_mini_bnr_2106',
    src: getImageUrl('58')
  },
  {
    value: 'https://www.y-logi.com/service/kaigai/service/tanshin/index.html',
    src: getImageUrl('59')
  },
  {
    value: 'https://www.y-logi.com/service/kaigai/service/index.html',
    src: getImageUrl('60')
  },
  {
    value: 'https://www.y-logi.com/service/kaigai/service/ryutaku/index.html',
    src: getImageUrl('61')
  },
  {
    value: 'https://www.y-logi.com/service/art/index.php',
    src: getImageUrl('62')
  },
  {
    value: 'https://www.yamato-hd.co.jp/facilities/index.html?=ytctop_mini',
    src: getImageUrl('63')
  },
  {
    value: 'https://market.kuronekoyamato.co.jp/market/MarketTopAction_doInit.action?utm_source=ytc_corporate&utm_medium=organic&utm_campaign=market_renewal&utm_content=bnr_ytc_customer',
    src: getImageUrl('64', 'png')
  },
  {
    value: 'https://faq.kuronekoyamato.co.jp/app/customer/list?utm_source=ytc&utm_medium=web&utm_campaign=personal_top',
    src: getImageUrl('65')
  },
  {
    value: 'https://www.yamato-hd.co.jp/pr/logo2021/',
    src: getImageUrl('66')
  },
  {
    value: 'https://nekosapo-order2.kuronekoyamato.co.jp/mimamori.html?utm_source=ytc_web&utm_medium=listing_ad&utm_campaign=202108_04',
    src: getImageUrl('67')
  },
]
const navList = [
  {
    src: getImageUrl('69', 'png'),
    value: 'https://line.me/ti/p/%40yamato_transport'
  },
  {
    src: getImageUrl('70', 'png'),
    value: 'https://twitter.com/yamato_19191129'
  },
  {
    src: getImageUrl('71', 'png'),
    value: 'https://www.instagram.com/yamato_transport/'
  },
  {
    src: getImageUrl('72', 'png'),
    value: 'https://www.facebook.com/YamatoTransportCoLtd'
  },
  {
    src: getImageUrl('73', 'png'),
    value: 'https://www.youtube.com/channel/UCSayTHeqUt6typ_HEcrBQFA'
  },
]
const TextNav = [
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/customer/send/',
    text: '送る'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/customer/redelivery/',
    text: '受け取る'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/customer/service/',
    text: 'サービス'
  },
  {
    value: 'http://zip.kuronekoyamato.co.jp/zip/servlet/jp.co.kuronekoyamato.cr.jz.servlet.browser.CRJZASSS0040',
    text: '郵便番号を調べる'
  },
  {
    value: 'https://faq.kuronekoyamato.co.jp/',
    text: 'よくあるご質問'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/contact/',
    text: 'お問い合わせ'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/pressrelease/',
    text: 'ニュースリリース'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/info/',
    text: 'お知らせ'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/',
    text: '総合トップ'
  },
  {
    value: 'https://business.kuronekoyamato.co.jp/',
    text: '法人のお客さま'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/corp/',
    text: '企業サイト'
  },
  {
    value: 'https://www.kuronekoyamato.co.jp/ytc/corp/recruit/',
    text: '採用情報'
  },
  {
    value: 'https://www.yamato-hd.co.jp/',
    text: 'ヤマトホールディングス'
  },
]
</script>

<template>
  <header class="header">
    <a class="header-left" target="_blank" href="https://www.kuronekoyamato.co.jp/ytc/customer/">
      <img src="./assets/22.png" alt="">
    </a>
    <div class="header-right">
      <img class="logo" src="./assets/chazhao.png" alt="">
      <img class="nav-logo" src="./assets/wap-nav.png" alt="">
    </div>
  </header>
  <van-overlay :show="loading"> <van-loading vertical type="spinner" v-if="loading"
      style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"
      color="#1989fa">加载中...</van-loading></van-overlay>
  <RouterView></RouterView>
  <footer>
    <ul class="banner">
      <li v-for="item in List">
        <a :href="item.value" target="_blank">
          <img :src="item.src" alt="">
        </a>
      </li>
    </ul>
    <div class="line"></div>
    <div class="nav">
      <a :href="item.value" v-for="(item, index) in navList" target="_blank">
        <img :src="item.src" alt="" :style="{
          marginRight: index === 4 ? '0' : undefined
        }">
      </a>
    </div>
    <div class="text-nav">
      <div v-for="(item, index) in TextNav" :style="{
        paddingLeft: [3, 4].includes(index) ? '19.6px' : undefined
      }">
        <a :href="item.value">
          {{ item.text }}
        </a>
      </div>
      <ul style="width: 100%;"></ul>
    </div>
    <a href="https://www.kuronekoyamato.co.jp/ytc/customer/">
      <img src="./assets/68.png" style="width:135px;height: auto;margin-top: 28px;" alt="">
    </a>
    <p class="mt-4" style="font-size: 10px;">© Yamato Transport Co., Ltd. All Rights Reserved.</p>
  </footer>
</template>

<style scoped lang="scss">
a:active,
a:hover,
a:link,
a:visited {
  color: #141414;
  -webkit-text-decoration: none;
  text-decoration: none;
}

a {
  transition: all .25s cubic-bezier(.4, 0, .2, 1) 0s;
}

.header {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 15px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;

  &-left {
    width: 234px;
    margin: 0;
    line-height: 0;
  }

  &-right {
    display: flex;
    align-items: center;
  }
}

.nav-logo {
  width: 30px;
  height: 35px;
  margin-left: 20px;

}

.logo {
  width: 24px;
  height: 24px;
}

footer {
  padding: 0 15px;
  margin-top: 47.6px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 35px;

  .banner {
    display: flex;
    flex-wrap: wrap;

    li {
      margin-top: 14px;
    }

    img {
      width: 168px;
      height: auto;
      backface-visibility: hidden;
      vertical-align: top;
      border-radius: 5.6px;
    }

    li:nth-child(2n) {
      margin-left: 5.6px;
    }

    padding-bottom: 84px;
  }

  .line {
    height: 1px;
    background-color: #141414;
    width: 100%;
  }

  .nav {
    display: flex;
    justify-content: center;
    padding-top: 28px;

    img {
      width: 45px;
      height: 45px;
      margin-right: 25px;
    }
  }

  .text-nav {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    color: rgb(20, 20, 20);

    div:nth-child(2n+1) {
      width: calc((100% - 52px)/2);
      margin-right: 52px;


    }

    div {
      margin-top: 28px;
    }

    div:nth-child(n+9) {
      padding-left: 19.6px;
    }
  }
}
</style>
